<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="我的联系方式\地址"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 表单 -->
      <view class="form">
        <!-- 收件人姓名 -->
        <view class="form-item">
          <text class="form-label required">收件人姓名</text>
          <input
            v-model="formData.name"
            class="form-input"
            placeholder="建议填写税务/财务姓名"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 收件人电话 -->
        <view class="form-item">
          <text class="form-label required">收件人电话</text>
          <input
            v-model="formData.phone"
            class="form-input"
            type="number"
            maxlength="11"
            placeholder="输入收件人手机号码"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 所在区域 -->
        <view class="form-item">
          <text class="form-label required">所在区域</text>
          <uni-data-picker
            v-model="formData.region"
            :localdata="regionData"
            placeholder="请选择"
            popup-title="选择区域"
            @change="handleRegionChange"
          ></uni-data-picker>
        </view>

        <!-- 详细地址 -->
        <view class="form-item">
          <text class="form-label required">详细地址</text>
          <textarea
            v-model="formData.address"
            class="form-textarea"
            placeholder="请输入内容"
            placeholder-style="color: #ccc"
            :maxlength="200"
            :auto-height="true"
          />
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="save-btn" @click="handleSave">
        <text>保存</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import regionDataJson from "@/utils/picker-region.json";

// 表单数据
const formData = ref({
  name: "",
  phone: "",
  region: [],
  address: "",
});

// 省市区数据（使用完整的全国数据）
const regionData = ref(regionDataJson);

// 选中的区域文本
const selectedRegionText = ref("");

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 处理区域选择变化
const handleRegionChange = (e) => {
  console.log("选择的区域:", e);
  // e.detail.value 是一个数组，包含 [省value, 市value, 区value]
  if (e && e.detail && e.detail.value) {
    selectedRegionText.value = e.detail.value
      .map((item) => item.text)
      .join(" ");
  }
};

// 保存
const handleSave = () => {
  // 验证
  if (!formData.value.name) {
    uni.showToast({
      title: "请输入收件人姓名",
      icon: "none",
    });
    return;
  }

  if (!formData.value.phone) {
    uni.showToast({
      title: "请输入收件人电话",
      icon: "none",
    });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(formData.value.phone)) {
    uni.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
    return;
  }

  if (!formData.value.region || formData.value.region.length !== 3) {
    uni.showToast({
      title: "请选择所在区域",
      icon: "none",
    });
    return;
  }

  if (!formData.value.address) {
    uni.showToast({
      title: "请输入详细地址",
      icon: "none",
    });
    return;
  }

  // TODO: 调用API保存
  uni.showToast({
    title: "保存成功",
    icon: "none",
    success: () => {
      setTimeout(() => {
        goBack();
      }, 1500);
    },
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
  padding-bottom: 160rpx;
}

// 表单
.form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 32rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-label {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 16rpx;

  &.required::before {
    content: "*";
    position: absolute;
    left: 0;
    color: #ff4d4f;
  }
}

.form-input {
  font-size: 28rpx;
  color: #333;
  padding: 0;
}

.form-textarea {
  font-size: 28rpx;
  color: #333;
  min-height: 120rpx;
  line-height: 1.6;
  padding: 0;
}

// 保存按钮
.save-btn {
  position: fixed;
  bottom: 32rpx;
  left: 32rpx;
  right: 32rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.3);

  &:active {
    opacity: 0.9;
  }
}

// uni-data-picker 样式覆盖
:deep(.uni-data-picker) {
  flex: 1;
}

:deep(.uni-data-picker__input-box) {
  height: auto;
  padding: 0;
  border: none;
}

:deep(.uni-data-picker__input-text) {
  font-size: 28rpx;
  color: #333;
}

:deep(.uni-data-picker__input-placeholder) {
  font-size: 28rpx;
  color: #ccc;
}

:deep(.uni-icons) {
  color: #999 !important;
}
</style>
